<template>
  <my-div class="share">
      <div class="head wrapper">
        <image style="width:30px;height:30px;" src="root:img/share/close@2x.png"></image>
        <div>
           <text style="color:rgba(99,112,146,1);font-size:30px;">规则</text>
        </div>
      </div>
      <div class="banner">
        <!-- <image ></image> -->
      </div>
      <div class="invite-range">
        <image class="invite-range-bg" src="root:img/share/range_bg@2x.png"></image>
        <div class="wrapper">
           <div class="range_box range_second">
            <image style="width:96px;height:128px;" src="root:img/share/range_second@2x.png"></image>
            <text style="color:rgba(60,71,98,1);font-size:24px;margin-top:40px;">AXC/USDT</text>
            <text style="color:rgba(237,91,20,1);font-size:30px;margin-top:16px;">3624.96</text>
          </div>
           <div class="range_box range_first">
            <image style="width:96px;height:128px;" src="root:img/share/range_first@2x.png"></image>
            <text style="color:rgba(60,71,98,1);font-size:24px;margin-top:40px;">AXC/USDT</text>
            <text style="color:rgba(237,91,20,1);font-size:30px;margin-top:16px;">3624.96</text>
          </div>
           <div class="range_box range_third">
            <image style="width:96px;height:128px;" src="root:img/share/range_third@2x.png"></image>
            <text style="color:rgba(60,71,98,1);font-size:24px;margin-top:40px;">AXC/USDT</text>
            <text style="color:rgba(237,91,20,1);font-size:30px;margin-top:16px;">3624.96</text>
          </div>
        </div>
      </div>
      <div class="resource">
         
      </div>
  </my-div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
    }
  },
  components: {},
  created() {
    console.log(this.$route.query)
  },
  methods: {}
}
</script>
<style scoped>
.wrapper{
  display: flex;
  flex-direction: row;
}
.head{
  width: 750px;
  padding-left: 30px;
  padding-right: 30px;
  height: 100px;
  justify-content: space-between;
  align-items: center;
}
.banner{
  width: 690px;
  height: 220px; 
  background-color: rgba(49,57,78,1);
  border-radius: 20px;
  margin-top: 34px;
  margin-left: 30px;
}
.invite-range{
  width: 690px;
  height: 328px;
  margin-left: 30px;
  margin-top: 82px;
}
.invite-range-bg{
  position: absolute;
  width: 690px;
  height: 328px;
}
.range_box{
  display: flex;
  flex-direction: column;
  width: 174px;
  height: 258px;
  align-items: center;
}
.range_second{
  margin-left: 28px;
  margin-top: 44px;
}
.range_first{
  margin-left: 56px;
  margin-top: 30px;
}
.range_third{
  margin-left: 56px;
  margin-top:44px;
}
.tab{
  width: 750px;
  height: 80px;
  border-bottom: rgba(255,255,255,1);
}
.tab-item {
  width: 250px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: rgba(154,156,164,1);
  font-size: 30px;
}
.tab-item:after{
  content:'';
  position: absolute;
  width: 28px;
  height: 4px;
  background-color: rgba(60,71,98,1);
  bottom: 0;
  left: 111px;
}
</style>